<template>
    <div>
        <el-bread></el-bread>
        <el-button type="primary" size="small" @click="add" class="btn">添加</el-button>
        <v-list @edit="edit"></v-list>
        <v-dialog ref="dialogInfo" :info="info" @cancel="cancel"></v-dialog>
    </div>
</template>

<script>
import vList from './list.vue'
import vDialog from './dialog.vue'
export default {
    data() {
        return {
            info: {
                // 控制弹框的显示隐藏
                isShow: false,
                // 用来告诉是编辑还是添加
                isAdd: true,
            }
        }
    },
    methods: {
        // 添加
        add() {
            this.info.isShow = true;
            this.info.isAdd = true;
        },
        // 关闭弹框
        cancel(e) {
            this.info.isShow = e
        },
        // 编辑
        edit(id){
            this.info.isShow = true;
            this.info.isAdd = false;
            // 利用 ref 
            this.$refs.dialogInfo.lookup(id)
        }
    },
    components: {
        vList,
        vDialog
    }
};
</script>

<style scoped>
.btn {
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>
